<template>
	<view class="">
		<view class="wzkc_top" style="padding-top: 20upx;">
			<u-search search-icon="" shape="square" placeholder="输入物资名称" v-model="searchObj.materialName"
				:clearabled="true" :show-action="false"></u-search>
			<view class="ser_btn_box">
				<view class="fen_col">
					<span>{{warehouse.name}}</span>
				</view>

				<view class="fen_col" @click="showMaterialType=true">
					<span>{{chooseTypeItem.categoryName}}</span>
					<u-icon name="arrow-down" color="#666"></u-icon>
				</view>

				<view class="fen_col" @click="searchSubmit">
					<span>搜索</span>
				</view>
			</view>
		</view>

		<view class="page" style="padding-top: 200rpx;">
			<mescroll-uni :safearea="true" :fixed="false" class="" ref="mescrollRef" @init="mescrollInit" :down="downOption"
				@down="downCallback" @up="upCallback">
				<view class="mater_list xb-card" v-for="(item, index) in materialList" :key="index"
					@click="selectItem(item)">
					<view class="mater_intro">
						<view class="intro">
							{{warehouse.name}} I {{ item.materialName }} I {{item.materialNum}}
						</view>
					</view>
					<view class="mater_title">
						<view class="intro">
							<text>{{ item.quantity }}{{item.unit}}</text>
						</view>
					</view>
				</view>
			</mescroll-uni>
		</view>

		<!--库房选择-->
		<u-select @confirm="maWareSelectFn" v-if="maWarehouseList.length>0" mode="single-column"
			v-model="showMaWarehouse" :list="maWarehouseList" value-name="id" label-name="houseNum"></u-select>

		<!--分类选择-->
		<u-popup v-model="showMaterialType" mode="bottom" height="600">
			<view>
				<view class="matype_t">
					<text @click="showMaterialType=false">取消</text>
					<text>确认</text>
				</view>
				<scroll-view scroll-y="true" style="height: 520rpx;">
					<view class="matype-box">
						<view v-for="(item,index) in maTypeList" :key="index" @click="chooseTypeFn(item)"
							:style="{color:item.categoryName==chooseTypeItem.categoryName?'#44D94B':''}">
							{{item.categoryName}}
						</view>
					</view>
				</scroll-view>
			</view>
		</u-popup>
		<!-- <u-select v-model="showMaterialType" mode="mutil-column-auto" :list="maTypeList" @confirm="typeConfirm"> -->
		</u-select>
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin], // 使用mixin
		props: {
			warehouse: {
				default: function() {
					return {
						houseId: '',
						name: '仓库'
					}
				},
				type: Object
			},
		},
		data() {
			return {
				searchObj: {
					materialName: '',
					houseId: '',
					category: ''
				},
				searchtxt: "",
				showMaterialType: false,
				showMaWarehouse: false,
				maWarehouseList: [{
					houseNum: "全部库房"
				}],
				chooseTypeItem: {
					categoryName: "分类"
				},
				maTypeList: [{
					categoryName: "全部分类"
				}],
				materialList: [],
				storeMaterList: [],
				downOption: {
					page: {
						num: 0,
						size: 10,
						time: null,
					},
					auto: false, //是否在初始化后,自动执行downCallback; 默认true
				},
				malIndex: '',
			};
		},
		created() {
      this.searchObj.houseId=this.warehouse.houseId
			this.apis.materialsApi.maMaterialTypeList().then(res => {
				this.maTypeList = this.maTypeList.concat(res.data)
			})
		},
		methods: {
			chooseTypeFn(item) {
				this.chooseTypeItem = item
				this.showMaterialType = false
				if (this.chooseTypeItem.categoryName == "全部分类") {
					this.searchObj.category = ""
				} else {
					this.searchObj.category = item.category
				}
			},
			/*下拉刷新的回调 */
			downCallback() {
				this.materialList = []
				this.mescroll.resetUpScroll();
			},
			/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
			upCallback(page) {
				//联网加载数据
				this.apis.materialsApi
					.maMaterialList({
						pageNum: page.num,
						pageSize: page.size,
						...this.searchObj
					})
					.then((res) => {
						this.materialList = this.materialList.concat(res.rows);
						this.mescroll.endBySize(res.rows.length, res.total);
					})
					.catch(() => {
						//联网失败的回调,隐藏下拉刷新的状态
						this.mescroll.endErr();
					});
			},
			searchSubmit() {
				this.materialList = []
				this.mescroll.resetUpScroll();
			},
			selectItem(item) {
				console.log("item", item)
				this.$emit("select",item)
			},
			maWareSelectFn(item) {
				this.chooseMaWarehousetxt = item[0].label
				if (this.chooseMaWarehousetxt == "全部库房") {
					this.searchObj.houseId = ""
				} else {
					this.searchObj.houseId = item[0].value
				}
			},
			typeConfirm(item) {

			}
		},
	};
</script>

<style lang="scss" scoped>
	.wzkc_top {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		background-color: #fff;
		padding: 10rpx 32rpx;
		z-index: 10;
	}

	.ser_btn_box {
		margin-top: 10upx;
		display: flex;

		.fen_col {
			margin-right: 10upx;
			height: 60upx;
			flex: 1;
			padding: 0 30upx;
			background-color: #F5F5F5;
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 24upx;
			font-weight: 400;
			color: #333333;
			border-radius: 10upx;

			&:last-child {
				margin-right: 0;
				color: #fff;
				background: #44D94B;
				justify-content: center;
			}
		}


	}

	.mater_list {
		padding: 24rpx 30rpx;
		box-sizing: border-box;
		background: #ffffff;
		display: flex;
		flex-direction: column;
		margin-bottom: 20rpx;
		border-radius: 12rpx;

		.mater_intro,
		.mater_title {
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			.intro {
				display: flex;
				font-size: 28rpx;
				justify-content: space-between;

				text:nth-child(2) {
					color: #333333;
					font-size: 26rpx;
				}
			}
		}

		.mater_intro {
			padding-bottom: 20rpx;
			border-bottom: 1rpx solid #eeeeee;
		}

		.mater_title {
			padding-top: 20rpx;

			.intro {
				font-size: 26rpx;
				color: #999999;
			}
		}
	}



	.matype_t {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 80upx;
		padding: 0 40upx;
		border-bottom: 2upx solid #F2F2F2;
		font-size: 32upx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;

		text:last-child {
			color: #44D94B;
		}

	}

	.matype-box {
		padding: 40upx;
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		font-size: 26upx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;

		view {
			padding-bottom: 40upx;
		}
	}
</style>
